<template>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="elpane">
          <el-form-item label="" prop="email">
            <el-input class="logins" type="email" v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input class="logins" type="password" v-model="ruleForm.pass" autocomplete="on"
                      placeholder="请输入密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="" prop="checkPass">
            <el-input class="logins" type="password" v-model="ruleForm.checkPass" autocomplete="on"
                      placeholder="请确认密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="" prop="code">
            <div class="verify-wrapper">
              <el-input style="width: 190px" type="text" maxlength="6" suffix-icon="el-icon-lock"
                        placeholder="请输入验证码" v-model="ruleForm.code"/>
              <el-button class="btn-orange" style="margin-left: 10px" :plain="true" :disabled="disabled"
                         @click="tackBtn">{{ valiBtn }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-button @click="reset" round type="danger" style="width: 150px;margin-top: 40px">重置</el-button>
</template>
<script>
import axios from "axios";
import {resetPasswordApi} from "@/pages/userLogin/index.js";
const router = useRouter()
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      disabled: false,
      valiBtn: '获取验证码',
      ruleForm: {
        pass: '',
        checkPass: '',
        email: '',
        code: ''
      },
      rules: {
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']},
          {
            validator: (rule, value, callback) => {
              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
              if (!emailRegex.test(value)) {
                callback(new Error('请输入正确的邮箱地址'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      }
    };
  },

  methods: {
    reset() {
      // 使用 validate 校验字段
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
            resetPasswordApi(this.ruleForm).then(res => {
              if (res.code === 0) {
                this.$message("重置成功")
                router.push("/userLogin")
              } else {
                this.$message(res.message)
              }
            }).catch(error => {
              console.log("重置失败" + error.error)
            })
        } else {
          this.$message.error("请检查表单信息");
          return;
        }
      });
    },
    tackBtn() {
      //验证码倒数60秒
      // 验证电子邮件地址的正则表达式函数
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      console.log(emailRegex.test(this.ruleForm.email))
      if (this.ruleForm.email === "" || emailRegex.test(this.ruleForm.email) === false) {
        this.$message('请输入正确的邮箱');
      } else {
        let time = 60;
        axios({
          url: '/api/v1/user/code',
          method: 'post',
          data: {
            email: this.ruleForm.email
          }
        }).then(res => {
          if (res.data.data.code == 0) {
            console.log("发送成功" + res.data.data)
          } else {
            console.log("发送失败" + res.data.data)
          }
        }).catch(error => {
          console.log("发送失败" + error.error)
        })
        let timer = setInterval(() => {
          if (time == 0) {
            clearInterval(timer);
            this.valiBtn = '获取验证码';
            this.disabled = false;
          } else {
            this.disabled = true;
            this.valiBtn = time + '秒后重试';
            time--;
          }
        }, 1000);
      }
    },
    refromnull() {
      this.ruleForm.code = null
      this.ruleForm.pass = null
      this.ruleForm.checkPass = null
      this.ruleForm.email = null
    }
  }
}
</script>

<style scoped>

.el-input {
  font-size: 15px;
}

.el-form-item__error {
  font-size: 16px;
}
.logins {
  width: 300px;
  justify-content: center;
}
.zhuce {
  margin-top: 30px;
  z-index: 999;

  .el-button {
    margin-left: 15px;
  }
}
.elpane {
  display: flex;
  justify-content: center; /* 横向居中 */
  align-items: center; /* 子内容纵向居中 */
  flex-direction: column; /* 子元素内部堆叠方式 */
}
</style>
